<template>
  <div id="CommunityManagement">
    <el-card shadow="always" :body-style="{ padding: '20px', height: '100%' }">
      <!-- card body -->
      <el-row type="flex" justify="space-around" style="height: 40px">
        <el-col :span="1" :offset="0"></el-col>
        <el-col :span="22" :offset="0" style="text-align: left">
          <el-button-group style="width: 580px">
            <el-button
              type="success"
              size="default"
              @click="addCommunity"
              icon="el-icon-plus"
              >新增</el-button
            >
            <el-button
              type="danger"
              size="default"
              icon="el-icon-delete"
              @click="batchDeleteCommunity"
              >删除</el-button
            >
            <el-button
              type="warning"
              size="default"
              icon="el-icon-refresh"
              @click="resetList"
              >重置</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-search"
              size="default"
              @click="getSearchList"
              >搜索</el-button
            >
            <el-input
              v-model="search"
              placeholder="请输入小区名称"
              size="normal"
              @change="getSearchList"
              clearable
              style="width: 200px"
            ></el-input>
          </el-button-group>
        </el-col>
        <el-col :span="1" :offset="0"></el-col>
      </el-row>

      <el-row type="flex" justify="space-around" style="margin-top: 5px">
        <el-col :span="1" :offset="0"></el-col>

        <el-col :span="22" :offset="0">
          <el-table
            :data="community_list"
            height="700"
            style="font-size: 0.9rem; text-align: center; width: 100%"
            @selection-change="setDelList"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="zone_id" label="小区ID"> </el-table-column>
            <el-table-column prop="zone_name" label="小区名称">
            </el-table-column>
            <el-table-column prop="zone_admin" label="小区管理员">
            </el-table-column>
            <el-table-column prop="zone_admin_email" label="管理员邮箱">
            </el-table-column>
            <el-table-column prop="zone_admin_phone" label="管理员电话">
            </el-table-column>
            <el-table-column prop="zone_address" label="小区地址">
            </el-table-column>
            <el-table-column align="right" width="300">
              <template slot="header" slot-scope="scope" fixed="right">
                操作</template
              >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="medium"
                  icon="el-icon-setting"
                  @click="openVideoDrawer(scope.row.zone_id)"
                  >云监控管理</el-button
                >
                <el-button
                  type="primary"
                  size="medium"
                  icon="el-icon-edit-outline"
                  @click="modifyCommunity(scope.row)"
                ></el-button>
                <el-button
                  type="danger"
                  size="medium"
                  icon="el-icon-delete"
                  @click="deleteCommunity(scope.row.zone_id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="1" :offset="0"></el-col>
      </el-row>
      <el-row
        :gutter="0"
        type="flex"
        justify="space-between"
        style="margin-top: 5px"
      >
        <!-- 分页插件 -->
        <el-col :span="1" :offset="0"></el-col>
        <el-col :span="22" :offset="0">
          <el-pagination
            background
            layout="total,prev, pager, next,jumper"
            :page-size="20"
            :total="community_total"
            @current-change="getCommunityList"
            :current-page.sync="page_num"
          >
          </el-pagination>
        </el-col>
        <el-col :span="1" :offset="0"></el-col>
      </el-row>
    </el-card>
    <!-- 添加，修改小区 -->
    <el-drawer
      :visible.sync="community_drawer_status"
      direction="rtl"
      size="auto"
      :destroy-on-close="true"
      :show-close="true"
      :wrapperClosable="false"
    >
      <h1>小区数据</h1>
      <el-divider direction="horizontal"></el-divider>
      <community-information
        :type="community_drawer_type"
        :information="modify_community_information"
        @closeDrawer="closeCommunityDrawer"
        @getList="getCommunityList"
        style="margin-right: 20px"
      ></community-information>
    </el-drawer>

    <el-drawer
      :visible.sync="video.drawer_status"
      direction="rtl"
      size="auto"
      title="云监控管理"
      :destroy-on-close="true"
      :show-close="true"
      :wrapperClosable="false"
    >
      <video-management :id="video.community_id" style="margin-right:20px;"></video-management>
    </el-drawer>
    <!-- 绑定微信用的对话框 -->
    <el-dialog
      title="绑定微信"
      :visible.sync="wx_login.dialog_status"
      width="400px"
      center
      :close-on-click-modal="false"
      :show-close="false"
      @opened="qr_init"
    >
      <div id="wx_login_qr" style="text-align: center; height: 320px"></div>
    </el-dialog>
  </div>
</template>

<script>
import CommunityInformation from "./CommunityInformation.vue";
import utils from "@/store/utils";
import VideoManagement from "../VideoManagement/VideoManagement.vue";

export default {
  name: "CommunityManagement",
  data() {
    return {
      community_list: [], //渲染列表
      community_total: 0, // 总数据量
      search: "", // 搜索框内容
      search_status: false, // 搜索状态控制
      search_data: [], // 搜索结果数据
      page_num: 1, // 控制页码
      community_drawer_status: false, // 控制抽屉的开关
      community_drawer_type: "add", // 控制抽屉类型
      modify_community_information: {}, // 类型为修改时给到相关信息
      del_list: [], // 删除列表
      wx_login: {
        dialog_status: false,
      },
      video: {
        drawer_status: false,
        community_id: "",
      },
    };
  },
  methods: {
    getCommunityList() {
      if (!this.search_status) {
        this.$axios({
          method: "post",
          url: "/api/zoneapi/dispatcher",
          data: {
            action: "list",
            page_max: "20",
            page: this.page_num,
            openid: localStorage.getItem("unionid"),
          },
        }).then((res) => {
          this.community_total = res.data.count;
          this.community_list = res.data.data;
        });
      } else {
        this.community_list = [];
        let start_data_num = (this.page_num - 1) * 20; // 20条数据为一页，记录到开始数据序号
        let paging = 0;
        for (let i = start_data_num; i < this.community_total; i++) {
          if (paging > 19) {
            return;
          } else {
            this.community_list[i] = this.search_data[i]; // 重新赋值
          }
          paging++;
        }
      }
    },
    addCommunity() {
      this.community_drawer_status = true;
      this.community_drawer_type = "add";
    },
    modifyCommunity(information) {
      this.community_drawer_status = true;
      this.community_drawer_type = "modify";
      this.modify_community_information = information;
    },
    batchDeleteCommunity() {
      this.$confirm(
        "确认是否删除这些小区，注意：若小区存在楼栋，则不能删除",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let _list = [];
          for (let item of this.del_list) {
            _list.push(item.zone_id);
          }
          if (_list.length == 0) {
            this.$message.error("请先选中任意小区再进行操作");
          } else {
            this.$axios({
              method: "post",
              url: "/api/zoneapi/dispatcher",
              data: {
                action: "del",
                zone_id: _list,
              },
            }).then((res) => {
              if (res.data.ret == 0) {
                this.$message.success("删除小区成功");
                this.page_num = 1;
                this.getCommunityList();
              } else {
                this.$message.error("删除小区失败");
              }
            });
          }
        })
        .catch(() => {});
    },
    deleteCommunity(val) {
      this.$confirm(
        "确认是否删除该小区，注意：若该小区存在楼栋，则不能删除",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$axios({
            method: "post",
            url: "/api/zoneapi/dispatcher",
            data: {
              action: "del",
              zone_id: [val],
            },
          }).then((res) => {
            if (res.data.ret == 0) {
              this.$message.success("删除小区成功");
              this.page_num = 1;
              this.getCommunityList();
            } else {
              this.$message.error("删除小区失败");
            }
          });
        })
        .catch(() => {});
    },
    getSearchList() {
      this.search_status = true;
      this.$axios({
        method: "POST",
        url: "/api/zoneapi/dispatcher",
        data: {
          action: "like",
          zone_name: this.search,
          openid: localStorage.getItem("unionid"),
        },
      }).then((res) => {
        this.search_data = res.data.data;
        this.page_num = 1;
        this.community_total = res.data.data.length;
        this.getCommunityList();
      });
    },
    setDelList(val) {
      this.del_list = val;
    },
    resetList() {
      this.search_status = false;
      this.page_num = 1;
      this.getCommunityList();
    },
    sys_init() {
      if (
        this.$store.state.unionid == "" ||
        this.$store.state.unionid == null
      ) {
        this.wx_login.dialog_status = true;
      }
    },
    qr_init() {
      let obj = new WxLogin({
        id: "wx_login_qr",
        appid: "wx7870d5e16708e05e",
        scope: "snsapi_login",
        redirect_uri: utils.urlencode(
          "https://www.liandunkaoqin.com/WechatLogin"
        ),
        state: `bind_wechat,${this.$store.state.username}`,
        href: "data:text/css;base64,QGNoYXJzZXQiVVRGLTgiOw0KLmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDI4MHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7ZGlzcGxheTogbm9uZTt9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fSA=",
      });
    },
    closeCommunityDrawer() {
      this.community_drawer_status = false;
    },
    openVideoDrawer(id) {
      this.video.drawer_status = true;
      this.video.community_id = id;
    },
  },
  mounted() {
    this.getCommunityList();
    this.sys_init();
  },
  components: {
    CommunityInformation,
    VideoManagement,
  },
};
</script>

<style scoped>
#CommunityManagement,
.el-card {
  height: 100%;
  overflow: hidden;
  overflow-x: auto;
}

.el-table {
  width: 100%;
}
</style>

<style>
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgb(200, 200, 200);
}

#CommunityManagement .el-table td,
#CommunityManagement .el-table td span,
#CommunityManagement .el-table th {
  text-align: center;
  font-size: 15px;
}

#CommunityManagement .el-table th {
  background-color: #ecf5ff;
}

h1 {
  margin: 10px auto;
  text-align: center;
  font-size: 1.6rem;
}
</style>
